<template>
  <div>
    <!-- 员工数据看板-销售额 -->
    <div class="top-sale" ref='staffData'></div>
  </div>
</template>

<script>
/**
 *       topOrder: { // 商品销量订单
 *         config: {
 *           color: '#4368e6'
 *         },
 *         dataList: []
 *       },
 *
 *       amount: { // 商品销售量
 *         config: {
 *           color: '#14D8CB'
 *         },
 *         dataList: []
 *       },
 */
import 'echarts/map/js/china.js'
export default {
  name: 'comparison',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {}
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList: {
      deep: true,
      handler (newVal, oldVal) {
        this.barGraph(this.documentId)
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      const documentId = this.documentId
      if (documentId) {
        this.barGraph(documentId)
      }
    })
  },
  created () {},
  methods: {
    // 电商数据看板商品销售订单
    barGraph (documentId) {
      const config = this.config
      console.log(config.valueArr)
      let dataList = [...this.dataList]
      // var market = this.$echarts.init(document.getElementById('market'))
      const docId = document.getElementById(documentId)
      const market = this.$echarts.init(docId.getElementsByClassName('top-sale')[0])
      const category = []
      const barData = []
      if (dataList) {
        dataList = dataList.sort((a, b) => { return a.value - b.value })
        dataList.forEach(item => {
          category.push(item.label)
          barData.push(item.value)
        })
      }

      market.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff' // 设置背景颜色
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          data: config.valueArr,
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#999999',
              fontSize: 10
            }
          }
        },
        yAxis: {
          type: 'category',
          data: category,
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: false
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 10
          },
          axisLabel:
              {
                formatter: function (value) {
                  let valueTxt = ''
                  if (value.length > 8) {
                    valueTxt = value.substring(0, 9) + '...'
                  } else {
                    valueTxt = value
                  }
                  return valueTxt
                }

              }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: barData,
            barWidth: 18, // 柱子宽度
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [-39, 1],
                textStyle: {
                  color: '#fff',
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0], // 设置柱子是否圆角
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: config.color }
                ])
              }
            }
          }
        ]
      })
      // market.setOption(option)
      window.addEventListener('resize', function () {
        market.resize()
      })
    }
  }
}
</script>
<style scoped lang="scss">
.top-sale{
  width: 100%;
  height: 500px;
}
</style>
